<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.Properties" %>
<c:set var="mainPageUrl" value="mainPage" scope="request"/>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/>
<%@ page isErrorPage="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404页面</title>
    <style>
        body {
            margin: 0;
            background-color: #3498db;
            font-family: "\5FAE\8F6F\96C5\9ED1";
            _padding-top: 100px;
        }

        @media screen and (max-width: 414px) {
            #wrap,
            #text span {
                width: 200px;
            }

            #text span {
                background-position: center;
                margin-bottom: 16px;
            }

            #text a:nth-of-type(1) {
                margin-left: 0;
            }
        }

        #wrap {
            border: 3px solid #fff;
            margin: 200px auto 0;
            width: 800px;
            border-radius: 30px;
            padding: 100px;
        }

        #text {
            text-align: center;
        }

        #text span {
            display: inline-block;
            color: #fff;
            width: 510px;
            font-size: 20px;
            margin: 5px;
        }

        #returnBtn {
            text-align: center;
            margin-top: 10px;
        }

        a {
            line-height: 14px;
            color: #fff;
            text-decoration: none;
            padding: 6px 14px;
            margin: 1px 0 0 10px;
            border: 1px solid #fff;
            border-radius: 14px;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -moz-transition: 0.2s ease-out;
            -webkit-transition: 0.2s ease-out;
        }

        a:hover,
        a:active {
            background: #fff;
            color: #666;
        }

        #time {
            margin-top: 15px;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }

        #error {
            margin-top: 15px;
        }

        #error span {
            color: #fff;
            font-size: 18px;
        }

        #error p {
            color: #eee;
            font-size: 16px;
        }
    </style>
</head>

<body>
<%
    Properties prop = new Properties();
    prop.load(this.getClass().getClassLoader().getResourceAsStream("app.properties"));
    String tel = prop.getProperty("tel.num");
%>
<div id="wrap">
    <div id="text">
            <span>
                该操作可能会引发系统处理异常，异常代码:<%
                if (exception == null) {
            %>404<%
            } else {
            %>500<%
                }
            %>
            </span>
        <span>
                请重新登录系统，如果仍存在问题，请联系系统维护人员!
            </span>
        <span>
                联系方式:<%=tel %>
            </span>
    </div>
    <div id="returnBtn">
        <a href="${ctx}/${mainPageUrl}">返回首页</a>
        <a href="javascript:" onclick="resetTimer();">返回上一页</a>
    </div>
    <div id="time">
        <span id="runTime"></span><span>秒后将返回登录页</span>
    </div>
    <div id="error">
        <% if (exception != null) {%>
        <span>异常信息：</span>

        <p><%=exception.toString() %>
        </p>
        <%}%>
    </div>
</div>
<script>
    var i = 10;
    var timer;
    window.onload = function () {
        timer = window.setInterval(runTime, 1000);
    }

    function runTime() {
        if (i > 0) {
            document.getElementById("runTime").innerHTML = i;
            i--;
        } else {
            window.clearInterval(timer);
            window.location.href = "/auth";
        }

    }

    //返回上一页
    function resetTimer() {
        if (timer != null && timer != undefined) {
            window.clearInterval(timer);
            history.back();
        }
    }
</script>
</body>

</html>